<template>
    <div style="margin-left: 150px;">
        <!-- 深入 v-model -->
        <button @click="show = !show">显示切换 {{show}}</button>
        <div>标题--{{title}}</div>
        <!-- 直接写 v-model 就是一个默认值的，子组件中是 modelValue, 默认的只能有一个-->
        <!-- <PopWin v-model="show"></PopWin> -->
        <!--  自定义名称的 v-model，v-model:title , 可以有多个  -->
        <!-- <PopWin v-model="show" v-model:title="title"></PopWin> -->
        <!-- 自定义修饰符 -->
        <PopWin v-model.balabala="show" v-model:title.didi="title"></PopWin>
        
    </div>
</template>

<script setup lang="ts">
import PopWin from './PopWin/index.vue'
import {ref} from 'vue'


// 组件上使用 v-model, 实现双向绑定， 是一个语法糖， 是 props 和 emits 组合而成 子组件中使用 props 和 emits 实现双向绑定
/*
    vue2中可以使用:属性.sync 让子组件改变父组件的值，vue3中取消了，融进了 v-model 中
*/
let show = ref<boolean>(true)
let title = ref<string>("我是一只狗")
</script>

<style scoped>

</style>